<template>
  <div class="sticky top-0 z-[999]">
    <!-- header pc -->
    <div class="bg-[#221312] h-[4.5rem] lg:flex hidden items-center w-full backdrop-blur flex-none transition-colors duration-500">
      <div class="flex justify-between items-center mx-auto w-full max-w-7xl">
        <div class="flex items-center">
          <div>
            <NuxtLink to="/">
              <img
                loading="lazy"
                src="https://cd.sealmg.com/assets/img/logo-img.png"
                alt="SEALMG Logo"
                title="Back to homepage"
                class="w-[9.81rem] h-[2.875rem] cursor-pointer mr-[50px]"
              />
            </NuxtLink>
          </div>
          <!--    -->
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#221312"
            text-color="#fff"
            active-text-color="#fff"
          >
            <el-menu-item :index="String(k)" v-for="(i, k) in newsData.category_tree" :key="k">
              <nuxt-link :to="localePath(`${i.route.path}`)">
                <span class="capitalize">{{ i.name }} </span>
              </nuxt-link>
            </el-menu-item>
          </el-menu>
        </div>
        <!-- <img src="" alt="" class="size-[14px] bg-gray-200 cursor-pointer" /> -->
        <nuxt-link class="px-[.625rem] py-[.3125rem]" :to="localePath('/news/search')">
          <i class="el-icon-search text-[1.125rem] cursor-pointer text-white"> </i>
        </nuxt-link>
      </div>
    </div>
    <!-- header h5 -->
    <div class="bg-[#fff] p-4 h-[2.75rem] w-full max-lg:flex hidden items-center justify-between backdrop-blur transition-all duration-500">
      <div class="flex gap-4 items-center">
        <!-- <i
          class="el-icon-s-unfold text-[1.125rem] text-[#000]"
          @click="show = !show"
        ></i> -->
        <img
          @click="show = !show"
          loading="lazy"
          critical="true"
          alt="https://cd.sealmg.com/assets/img/mobile/nav-icon.png"
          src="https://cd.sealmg.com/assets/img/mobile/nav-icon.png"
          class="size-[1.5rem] cursor-pointer"
        />
        <NuxtLink :to="localePath('/')" class="w-[7.28rem] h-[2.13rem]">
          <img src="https://cd.sealmg.com/assets/img/logo-img.png" alt="SEALMG Logo" title="Company logo" class="w-full h-full" loading="lazy" />
        </NuxtLink>
      </div>
      <nuxt-link :to="localePath('/news/search')">
        <i class="el-icon-search text-[1.125rem] text-[#BBBBBB]"></i>
      </nuxt-link>
    </div>
    <!-- header h5 弹框 -->
    <div class="fixed inset-0 backdrop-blur-sm" :class="show ? 'flex' : 'hidden'" @click="show = !show">
      <div class="w-3/5 h-full bg-[#fff] flex flex-col p-4 gap-3">
        <div class="flex justify-between items-center">
          <div class="w-[7.28rem] h-[2.13rem]">
            <img
              src="https://cd.sealmg.com/assets/img/logo-img.png"
              loading="lazy"
              class="size-full object-cover"
              alt="SEALMG Logo"
              title="Navigation menu logo"
            />
          </div>
          <div class="p-3" @click.stop="show = !show">
            <i class="el-icon-close text-xl font-bold"></i>
          </div>
        </div>
        <div v-for="(i, k) in newsData.category_tree" :key="k" class="">
          <nuxt-link class="flex gap-4 items-center" :to="localePath(`${i.route.path}`)">
            <span> {{ i.name }} </span>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: '0',
        show: false
      }
    },
    created() {},
    methods: {},
    computed: {
      newsData() {
        return this.$store.state.user.newsData || {}
      }
    }
  }
</script>
<style lang="less" scoped>
  .el-menu--horizontal > .el-menu-item.is-active {
    border: none !important;
  }
  .el-menu--horizontal > .el-menu-item {
    border: none !important;
  }
  // 背景透明
  .el-menu-demo {
    background: transparent;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    border: none !important;
  }
  .el-menu--horizontal > .el-menu-item {
    border: none !important;
  }
  // 去除自带的底部border
  .el-menu.el-menu--horizontal {
    border: none;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    font-weight: 600;
    color: #ff4d33 !important;
  }
  .el-menu-item {
    // color: #303133;
  }
</style>
